<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>chart</title>
		<style>
			* {
				padding: 0;
				margin: 0;
				box-sizing: border-box;
			}

			html,
			body,
			.view {
				height: 100%;
			}

			.view {
				display: flex;
				justify-content: center;
				align-items: center;
				background: #000;
			}

			.chart {
				width: 250px;
				height: 250px;
			}

			svg {
				display: block;
				width: 100%;
				height: 100%;
			}

			.circle {
				stroke-linecap: round;
				transition: all .4s;
			}
		</style>
	</head>
	<body>
		<div class="view">
			<div class="chart">
				<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="100" height="100"
					viewBox="0 0 100 100">
					<defs>
						<linearGradient id="otog" x1="0%" y1="0%" x2="100%" y2="0%">
							<stop offset="0%" style="stop-color:rgb(235, 107, 3); stop-opacity:1" />
							<stop offset="100%" style="stop-color:rgb(91, 205, 89); stop-opacity:1" />
						</linearGradient>
					</defs>
					<text x="26" y="60" fill="url(#otog)" style="font-size: 25px;">
						<tspan id="text"></tspan>
					</text>
				</svg>
			</div>
		</div>
		<script>
			var wrap = document.querySelector('svg');
			var text = document.getElementById('text');
			var pi = Math.PI;
			var r = 40;
			var d = 2 * r * pi;
			var part = d / 8;
			var sum = part * 5;

			function dashArray(val) {
				if (val > 100 || val < 0) return;
				var cut = state => (state - val) * part / 20
				if (val > 80) {
					return `${part} 5 ${part} 5 ${part} 5 ${part} 5 ${part - cut(100)} ${ d * 3 / 8 - 20 + cut(100) }`
				}
				if (val > 60) {
					return `${part} 5 ${part} 5 ${part} 5 ${part - cut(80)} ${ d / 2 - 15 + cut(80) }`
				}
				if (val > 40) {
					return `${part} 5 ${part} 5 ${part - cut(60)} ${ d * 5 / 8 - 10 + cut(60) }`
				}
				if (val > 20) {
					return `${part} 5 ${part - cut(40)} ${ d * 5 / 3 - 5 + cut(40) }`
				}
				return `${part - cut(20)} ${ d * 7 / 8 + cut(20) }`
			}

			function createRing(x, y, r, color) {
				var circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
				circle.setAttribute('class', 'circle');
				circle.setAttribute('cx', x);
				circle.setAttribute('cy', y);
				circle.setAttribute('r', r);
				circle.setAttribute('fill', 'none');
				circle.setAttribute('stroke', color);
				circle.setAttribute('stroke-width', 3);
				circle.style.strokeDashoffset = -d * 3 / 8 - 5.8;
				wrap.appendChild(circle);
				return circle;
			}

			var backRing = createRing(50, 50, 40, '#777');
			backRing.style.strokeDasharray = dashArray(100);
			var frontRing = createRing(50, 50, 40, 'url(#otog)');

			function setPercent(val) {
				frontRing.style.strokeDasharray = dashArray(val);
				text.innerHTML = val + '%';
			}
			setInterval(() => {
				setPercent(Math.round(100 * Math.random()));
			}, 1000);
		</script>
	</body>
</html>

